<template>
	<view>
		<view class="c-box" id="editProduct">
			<view class="edit">
				<view class="ul"  >
					<view class="li">
						<view class="span">商品名称</view>
						<input type="text" v-model="product.tradeName" contenteditable />
					</view>
					<view class="li">
						<view class="span">价格</view>
						<input class="num" type="text" v-model="product.price" />
					</view>
					<view class="li">
						<view class="span">关联展会</view>
						<picker id="exhibition" class="shortSelect"  @change="bindPickerChange" :value="index" :range="exhibitionList" range-key="exhibitionName" >
							<!-- <view class="uni-input">{{exhibitionList[index].exhibitionName}}</view> -->
							<view>请选择</view>
						</picker>
						<!-- <select id="exhibition" class="shortSelect">
							<option value="">请选择</option>
							<option v-for="item in exhibitionList" :value="item.id" :key="item.id">{{item.exhibitionName}}
							</option>
						</select> -->
					</view>
					<view class="li">
						<view class="span">已选展会</view>
					</view>
					<view v-for="item in useExhibitionList" class="showExhibition li">
						{{item.exhibitionName}}
						<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_cha.png" style="width: 28rpx;" @click="delExhibition(item)" />
					</view>
				</view>

				<view  class="btn a " @click="confirm()">确定</view>
				<view  class="warnText p">更多产品信息请登录pc端后台进行修改（PC端打开网址：www.nocexpo.com，点击右上角“供应商后台”按钮登录维护）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import editApi from '@/api/editProduct.js'
	import commonApi from '@/utils/commonMethod.js';
	
	export default {
		data() {
			return {
				product: {},
				currentUser: [],
				exhibitionList: [],
				useExhibitionList: [],
				index: '',
				selectedExhitionId: '',
				selectedExhitionName: '',
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
				
			}
		},
		async onLoad(options) {
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
	
			const productId = options.productId
			await editApi.getProductInfoById(productId).then(res =>{
				this.product = res.data.nocProduct
				this.useExhibitionList = this.product.exhibitionList;
			})
		
			await editApi.getExhibitionList(this.currentUser.id).then(res =>{
				this.exhibitionList = res.data.list;
				console.log("exhibitionList");
				console.log(this.exhibitionList);
			})
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		onShow(){
		  
		  setTimeout(()=> {
		    
		    if (getApp().globalData.onShow) {
		      getApp().globalData.onShow = 0;
		      console.log("demo前后台切换之切到前台")
		    }
		    else {
		      console.log("demo页面被切换显示")
		      this.startTime = +new Date();
		    }
		    
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		onUnload(){
		    setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"产品编辑")
			  			
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTo;
				this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
			},
			onRefresh() {
				if(this.search.page <= this.totalPage){
					this.search.page;
					this.$refs.hint.setStatus('loading');
					console.log("还有下一页" + this.search.page);
					this.getSamplebookList();
				}else{
					this.$refs.hint.setStatus('loadingComplete');
					console.log("没有下一页")
				}
			},
			async bindPickerChange(e){
				console.log("下拉列表框");
				console.log(e);
				let selectedIndex = e.detail.value
				this.selectedExhitionId = this.exhibitionList[selectedIndex].id
				this.selectedExhitionName = this.exhibitionList[selectedIndex].exhibitionName
				
				await this.updateSelected()
				
			},
			updateSelected(){
				console.log(this.useExhibitionList);
				if(this.useExhibitionList != null && this.useExhibitionList.length != 0){
					for (let x of this.useExhibitionList) {
						if(x.id == this.selectedExhitionId){
							uni.showModal({
								title: "",
								content: "展会已选择",
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								} 
							});
							return;
						}
					}
				}else{
					this.useExhibitionList = []
				}
				console.log(this.useExhibitionList);
				if(this.selectedExhitionId != ''){
					let useItem = {
						id: this.selectedExhitionId,
						exhibitionName: this.selectedExhitionName,
					};
					this.useExhibitionList.push(useItem);
				}
			},
			confirm(){
				uni.showModal({
					title: "提交",
					content: "是否提交",
					showCancel:true,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							that.submit()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			},
	
			//提交产品
			async submit(){
				this.product.exhibitionList = this.useExhibitionList;
				await editApi.updateProduct(this.product).then(res=>{
					uni.showModal({
						title: "提交",
						content: "提交成功",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/statistics/product'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						} 
					});
				})
			},
			delExhibition(item) {
				const self = this
				uni.showModal({
					title: "",
					content: "确定删除",
					showCancel:true,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							for (let i = 0; i < self.useExhibitionList.length; i++) {
								if (self.useExhibitionList[i].id == item.id) {
									self.useExhibitionList.splice(i, 1);
									break;
								}
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
	
		
		// $('#exhibition').on('change',function(){
		//     let options=$("#exhibition option:selected");
		//     let exhibitionId = options.val();
		//     let exhibitionName = options.text();
		//     if(null == this.useExhibitionList){
		//         this.useExhibitionList = []
		//     }
		//     for (let x of this.useExhibitionList) {
		//         if(x.id == exhibitionId){
		//             layer.open({
		//                 content: '展会已选择!',
		//                 btn: '确定'
		//             });
		//             $("#exhibition").val('');
		//             return;
		//         }
		//     }
		//     if(exhibitionId != ''){
		//         let useItem = {
		//             id: exhibitionId,
		//             exhibitionName: exhibitionName,
		//         };
		//         this.useExhibitionList.push(useItem);
		//     }
		//     $("#exhibition").val('');
		// });
		// $('.edit .btn').click(function () {//弹窗
		//     layer.open({
		//         anim: '提交',
		//         content: '是否提交？',
		//         btn: ['确定', '取消'],
		//         yes: function(index){
		//             this.submit()
		//             layer.close(index)
		//         }
		
		//     });
		// });
</script>

<style>
	.edit {
	    padding-bottom: 28rpx;
	}
	.edit .ul {
	    background: #fff;
	    padding: 0 28rpx;
	    margin-bottom: 75rpx;
	}
	.edit .li {
	    border-top: 1px solid #f5f5f5;
	    height: 91rpx;
	}
	.edit .li .span {
	    float: left;
	    font-size: 26rpx;
	    color: #1a1a1a;
	    line-height: 91rpx;
	}
	.edit .li input {
	    float: right;
	    border: 0;
	    height: 91rpx;
	    line-height: 91rpx;
	    display: inline-block;
	    text-align: right;
	    font-size: 26rpx;
	    width: 60%;
	    color: #8f9aa8;
	}
	.edit .li input.num {
	    color: #fc5260;
	}
	.shortSelect {
	    float: right;
	    height: 91rpx;
	    width: 78%;
	    line-height: 91rpx;
	    border: 0rem;
	    font-size: 26rpx;
	    color: #8f9aa8;
	    direction: rtl;
	    background-color: white;
	}
	.showExhibition {
	    font-size: 26rpx;
	    line-height: 91rpx;
	    color: #8f9aa8;
	    text-align: center;
	}
	
	.edit .btn {
	    width: 644rpx;
	    margin: 0 auto;
	    display: block;
	    height: 91rpx;
	    background: #029e9d;
	    color: #fff;
	    text-align: center;
	    line-height: 91rpx;
	    font-size: 32rpx;
	    border-radius: 46rpx;
	}
	.warnText {
	    color: red;
	    font-size: 28rpx;
	    margin-top: 35rpx;
	}
	
</style>